<template>
<el-form-item :label="$t('info.bookName')" prop="bookName">
                        <el-input :placeholder="t('info.inputBookNameTip')" clearable v-model="state.queryForm.bookName"
                                  style="max-width: 180px"/>
                    </el-form-item>
                    <el-form-item>
                        <el-button formDialogRef icon="search" type="primary" @click="getDataList">
                            {{ $t('common.queryBtn') }}
                        </el-button>
                        <el-button icon="Refresh" formDialogRef @click="resetQuery">{{ $t('common.resetBtn') }}
                        </el-button>
                    </el-form-item>
  <el-dialog title="图书资源" v-model="visible" :close-on-click-modal="false" draggable style="width: 1050px;height: 680px" z-index="9999">
    <div class="layout-padding-auto layout-padding-view" style="width: 1010px;margin-left: 2px;;height: 500px">
      <el-row v-show="showSearch">
        <el-form :model="state.queryForm" ref="queryRef" :inline="true" @keyup.enter="getDataList">
        </el-form>
      </el-row>
      <el-row>
        <div class="mb8" style="width: 100%">
          <right-toolbar v-model:showSearch="showSearch" :export="'digitallibrary_info_export'"
                         @exportExcel="exportExcel" class="ml10" style="float: right;margin-right: 20px"
                         @queryTable="getDataList"/>
        </div>
      </el-row>
      <el-table :data="state.dataList" v-loading="state.loading" style="width: 100%;line-height: 45px" ref="multipleTableRef"
                :cell-style="tableStyle.cellStyle"
                :header-cell-style="tableStyle.headerCellStyle"
                border  :row-key="getRowKeys"
                @selection-change="handleSelectionChange" @sort-change="sortChangeHandle">
        <el-table-column type="selection" :reserve-selection="true" width="40" align="center" />
        <el-table-column type="index" :label="t('info.index')" width="40"/>

   


                <el-table-column prop="createTime" :label="t('info.createTime')" sortable="custom"
                                 show-overflow-tooltip/>

                <el-table-column prop="createUser" :label="t('info.createUser')" show-overflow-tooltip/>
            </el-table>
            <pagination @size-change="sizeChangeHandle" @current-change="currentChangeHandle"
                        v-bind="state.pagination"/>

        </div>
        <template #footer>
      <div class="info_owenr_butoon1" style="margin-top: 20px">
        <span class="dialog-footer">
          <el-button @click="visible = false">{{ $t('common.cancelButtonText') }}</el-button>
          <el-button type="primary" @click="onSelectionComplete">{{ $t('common.confirmButtonText') }}</el-button>
        </span>
        </div>
</template>

<script setup lang="ts" name="systemBookInfo">
    import {BasicTableProps, useTable} from "/@/hooks/table";
    import {fetchList, delObjs, getDataType, getType, getbookGrade} from "/@/api/digitallibrary/info";
    import {getBookInfo} from "/@/api/digitallibrary/infoOwner";
    import {useMessage, useMessageBox} from "/@/hooks/message";
    import {useDict} from '/@/hooks/dict';
    import {useI18n} from "vue-i18n";
    import {dateTimeStr, dateStr} from "/@/utils/formatTime";
    import {getBuckets} from "/@/api/digitallibrary/file";
    import {onMounted} from "vue";

    const emit = defineEmits(['data-selected']);
    // 引入组件
    const {t} = useI18n()
    // 定义查询字典

    const {book_from, status, scope_of_use} = useDict('scope_of_use', 'book_from', 'status')
    // 定义变量内容
    const formDialogRef = ref()
    const multipleTableRef = ref()
    const visible = ref(false)
    // 搜索变量
    const queryRef = ref()
    const showSearch = ref(true)
    // 多选变量
    const selectObjs = ref([]) as any
    const selectedIds = ref([]) as any;
    const multiple = ref(true)
    const excelUploadRef = ref();

    const state: BasicTableProps = reactive<BasicTableProps>({
        createdIsNeed: false,
        queryForm: {},
        pageList: fetchList
    })

    const toggleSelection = (rows) => {
        if (rows) {
            rows.forEach(row => {
                selectedIds.value.forEach(item => {
                    if (row.id == item.id) {
                        multipleTableRef.value.toggleRowSelection(row, true);
                    }
                })
            })
        }
    }
    const getRowKeys = (row) => {
        return row.id;
    }

    // 打开弹窗
    const openDialog = (id: any, copyrightOwnerId: string) => {
        visible.value = true
        getDataList();
        resetQuery
        if (id != null) {
            // selectedIds.value = [id];
            selectObjs.value = [id];
            selectedIds.value = id;
            console.log("id:", id)
            console.log("id2:", selectedIds.value)
            toggleSelection(state.dataList);
            return;
        }
        if (copyrightOwnerId) {
            state.queryForm.copyrightOwnerId = copyrightOwnerId;
            getDataList();
        }
    };

// 导出excel
const exportExcel = () => {
  downBlobFile('/digitallibrary/info/export', state.queryForm, '图书资源.xlsx')
}


    // 清空搜索条件
    const resetQuery = () => {
        // 清空搜索条件
        queryRef.value?.resetFields()
        // 清空多选
        selectObjs.value = []
        getDataList()
    }
    onMounted(() => {
        getDataList();
    })
    const {
      getDataList,
      currentChangeHandle,
      sizeChangeHandle,
      sortChangeHandle,
      downBlobFile,
      tableStyle
    } = useTable(state)
    // 多选事件
    const handleSelectionChange = (objs: any) => {
        // selectedIds.value.push(...objs.map((val: any) => val.id));
        selectedIds.value = objs.map((val: any) => ({id: val.id, bookName: val.bookName}));
        multiple.value = !objs.length;
    };
    const onSelectionComplete = () => {
        emit('data-selected', selectedIds.value);
        visible.value = false;
    };

    // 删除操作
    const handleDelete = async (ids: string[]) => {
        try {
            await useMessageBox().confirm(t('common.delConfirmText'));
        } catch {
            return;
        }

        try {
            await delObjs(ids);
            getDataList();
            useMessage().success(t('common.delSuccessText'));
        } catch (err: any) {
            useMessage().error(err.msg);
        }
    };
    // 暴露变量
    defineExpose({
        openDialog,
        onSelectionComplete
    });
</script>
<style scoped>

</style>